<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/15
  Time: 9:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ include file="common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书籍信息</title>
    <script>

        $(document).ready(function() {
            loadBooks(); // 页面加载时加载所有书籍信息

            $('#orderForm').on('submit', function(e) {
                e.preventDefault();
                placeOrder();
            });
        });

        function loadBooks() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/books?operation=findAll',
                dataType: 'json',
                success: function(response) {
                    $('#bookTableBody').empty();

                    $.each(response.data, function(index, book) {
                        $('#bookTableBody').append(
                            '<tr>' +
                            '<td>' + book.bookId + '</td>' +
                            '<td>' + book.title + '</td>' +
                            '<td>' + book.author + '</td>' +
                            '<td><img style="width: 50px" src="' + book.coverImageUrl + '" alt="Book Cover" class="book-image"></td>' +
                            '<td>' + book.price + '</td>' +
                            '<td><button onclick="showOrderModal(' + book.bookId + ', \'' + book.title + '\')" class="btn btn-primary btn-sm">下单</button></td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载书籍数据出错:', error);
                }
            });
        }

        function showOrderModal(bookId,bookTitle) {
            $('#bookId').val(bookId);
            $('#orderModal').modal('show');
            $('#bookTitle').val(bookTitle); // 将书名设置到隐藏的输入框
        }

        function placeOrder() {
            var bookId = $('#bookId').val();
            var quantity = $('#quantity').val();
            var buyer = $('#buyer').val();
            var bookTitle = $('#bookTitle').val(); // 从隐藏的输入框获取书名
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/orders',
                data: {
                    operation: 'placeOrder',
                    bookId: bookId,
                    quantity: quantity,
                    bookName: bookTitle,
                    buyer: buyer
                },
                dataType: 'json',
                success: function(response) {
                    $('#orderModal').modal('hide');
                    $('#orderForm')[0].reset();
                    alert('订单提交成功');
                },
                error: function(xhr, status, error) {
                    console.error('提交订单出错:', error);
                }
            });
        }
    </script>
</head>
<body>
<div class="container mt-4">
    <h1 class="mb-4">书籍信息</h1>
    <table id="bookTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="bookTableBody">
        <!-- 书籍数据将会动态填充在这里 -->
        </tbody>
    </table>
</div>

<!-- 下单模态框 -->
<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="orderForm">
                <input type="hidden" id="bookTitle" name="bookTitle"> <!-- 隐藏的输入框用于存储书名 -->
                <div class="modal-header">
                    <h5 class="modal-title" id="orderModalLabel">下单</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="bookId" name="bookId">
                    <div class="form-group">
                        <label for="buyer">购买人</label>
                        <input type="text" class="form-control" id="buyer" name="buyer" required>
                    </div>
                    <div class="form-group">
                        <label for="quantity">数量</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交订单</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
